<!doctype html>
<html lang="zh-hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/main.css">    
<script src="lib/jquery-2.1.1.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<title>ajax方式修改客户信息</title>

<!-- 省市区 -->
<script type="text/javascript">
function select1() {
$.ajax(
{
    type: "post",
    url: "getProvince",
    //data: { "code": "" },
    success: function (msg) {
        for (var i = 0; i < msg.length; i++) {
            $("#S1").append("<option value='" +msg[i].provinceId+ "'>" + msg[i].province + "</option>");
        }
        select2();
        
    }
})
};

function select2() {
$("#S2").html("");
$.ajax(
{
    type: "post",
    url: "getCity",
    data: {"code":$('#S1').val()},
    success: function (msg) {
        for (var i = 0; i < msg.length; i++) {
            $("#S2").append("<option value=" + msg[i].cityId + ">" + msg[i].city + "</option>");
        }
        select3();
    }
})
};
        
function select3() {
$("#S3").html("");
$.ajax(
{
    type: "post",
    url: "getArea",
    data: { "code":$('#S2').val()},
    success: function (msg) {
        for (var i = 0; i < msg.length; i++) {
            $("#S3").append("<option value=" + msg[i].areaID + ">" + msg[i].area+ "</option>");
        }
    }
})
};

$(function () {
select1();
$('#S1').bind("change", select2);
$('#S2').bind("change", select3);
});

function test1(){ 	//check phone
 $.ajax({ url:"check",
 		data:{phoneName:$("#phone1").val(),type:1}, 
 		type:'post',
        success: function(obj){
        	if(obj.resultState<0){	//出现错误
   			 	//alert(obj.tip);
   			 	$("#phoneTip").removeClass();
   			 	$("#phoneTip").addClass("input-group-addon"); 
   			 	$("#phoneTip").html(obj.tip);
   			 	$("#phoneImg1").attr("src","images/no.png");
   			 }
   			else{
   				$("#phoneImg1").attr("src","images/yes.png");	
   				$("#phoneTip").html("");
   			} 
}});   
}

function test2(){   //check name
 $.ajax({ url:"check",
 		data:{phoneName:$("#name").val(),type:2}, 
 		type:'post',
        success: function(obj){
        	if(obj.resultState<0){	//出现错误
   			 	//alert(obj.tip);
   			 	$("#nameTip").html(obj.tip);
   			 	$("#nameImg").attr("src","images/no.png");
   			 }
   			else{
   				$("#nameImg").attr("src","images/yes.png"); 
   				$("#nameTip").html("");
   			}				 
}});   
} 

</script>
</head>
<body>
	
<!-- 收集数据用 隐藏 -->
<table border="1" class="">
  <tr>
    <th>phone1Id</th>
    <th>phone2Id</th>
    <th>phone3Id</th>
  </tr>
  <tr>
    <td><input type="text" name="phone1Id" id="phone1Id"></td>
    <td><input type="text" name="phone2Id" id="phone2Id"></td>
    <td><input type="text" name="phone3Id" id="phone3Id"></td>
  </tr>
</table>
				
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><img class="home" src="images/phone.png"></div>
<div class="input-group-addon"><img class="home" src="images/add.png"></div>
<input type="text" class="form-control" id="phone1" placeholder="默认电话" onChange="test1()">
<div class="" id="phoneTip"> </div>
<div class="input-group-addon"><img class="home" id="" src="images/trash03.png"></div>
<div class="input-group-addon"><img class="home" id="phoneImg1" src="images/zanwei.png"></div>
</div>



<div class="input-group">
<div class="input-group-addon"><img class="home" src="images/name.png"></div>
<input type="text" class="form-control" id="name" placeholder="姓名" onChange="test2()">
<div class="input-group-addon" id="nameTip"> </div>
<div class="input-group-addon"><img class="home" id="nameImg" src="images/busy.png"></div>
</div>

<!-- 地址显示  -->
<div class="input-group">
<div class="input-group-addon"><img class="home" src="images/zanwei.png"></div>
<input type="text" class="form-control" id="exampleInputAmount" name="addName" placeholder="地址">
<!-- 地址实际值隐藏域  --> 
<input type="text" class="form-control" id="exampleInputAmount" name="addValue" placeholder="地址值逗号分隔">
</div>    

                       
                
<div class="input-group">
<div class="input-group-addon">省&nbsp;</div>
<select class="form-control" id="S1">
</select>
<!--<div class="input-group-addon"><img class="home" src="images/zanwei.png"></div>-->
</div>
    
<div class="input-group">
<div class="input-group-addon">市&nbsp;</div>
<select class="form-control" id="S2">
</select>
<!--<div class="input-group-addon"><img class="home" src="images/busy.png"></div>-->
</div>
    
<div class="input-group">
<div class="input-group-addon">区&nbsp;</div>
<select class="form-control" id="S3">
</select>
<!--<div class="input-group-addon"><img class="home" src="images/no.png"></div>-->
</div>
    
    
<div class="input-group">
<div class="input-group-addon"><img class="home" src="images/memo.png"></div>
<textarea class="form-control" rows="3" cols="10"> </textarea>
<!--<div class="input-group-addon"><img class="home" src="images/yes.png"></div>-->
</div>
 

    
    
</div><!--form-group-->
				

</body>
</html>